<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">客户合并</span>
  </div>
<!--  查询-->
  <el-card>
  <el-form label-width="150px" style="margin: 20px;margin-top: 10px">
    <el-row :gutter="60">
      <el-col :span="24" style="margin-bottom: 3px;margin-top: 0">
        <span >输入查询条件</span>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合并后客户号">
          <el-input placeholder="精准查询"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合并后客户名称">
          <el-input placeholder="模糊查询"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合并后证件类型">
          <el-input placeholder="模糊查询"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合并后证件号码">
          <el-input placeholder="精确查询"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item style="display: grid; place-items: center;">
      <el-space :size="100">
        <el-button type="primary">查询</el-button>
        <el-button >重置</el-button>
      </el-space>
    </el-form-item>
  </el-form>
  </el-card>
<!--查询结果列表-->
  <el-form >
    <div>
      <el-button @click="beforeAdd">新增</el-button>
      <el-button @click="beforeEdit">修改</el-button>
      <el-button>查看</el-button>
      <el-button>删除</el-button>
      <el-button>合并撤销</el-button>
    </div>
    <el-table style="width: 100%">
      <el-table-column label="序号" type="index"  align="center"></el-table-column>
      <el-table-column label="客户名称" prop=""  align="center"></el-table-column>
      <el-table-column label="证件类型" prop=""  align="center"></el-table-column>
      <el-table-column label="证件号码" prop=""  align="center"></el-table-column>
      <el-table-column label="状态" prop=""  align="center"></el-table-column>
      <el-table-column label="审批状态" prop=""  align="center"></el-table-column>
      <el-table-column label="登记人" prop=""  align="center"></el-table-column>
      <el-table-column label="登记日期" prop=""  align="center"></el-table-column>
      <el-table-column label="登记网点" prop=""  align="center"></el-table-column>
    </el-table>
  </el-form>

<!-- 弹窗-->
  <el-dialog :title="dialogTitle"
             style="width: 1000px;padding: 40px"
             v-model="dialogVisible"
             :before-close="handleClose"
  >
    <el-form label-width="200px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="申请流水号">
            <el-input title="只读" readonly v-model="id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并后客户号">
            <el-select>
              <el-option label="网点内移交" value="10"></el-option>
              <el-option label="法人机构下跨网点" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并后客户名称">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并后证件类型">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并后证件号码">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并后所属网点">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合并事由" >
            <el-input  style="height: 50px;resize: none"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记人">
            <el-input title="只读" readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记网点">
            <el-input title="只读" readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登记日期">
            <el-input title="只读" readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并状态">
            <el-select></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并日期">
            <el-input ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="display: flex;place-items: center; width: 100%">
        <el-space :size="100">
          <el-button type="primary">保存</el-button>
          <el-button type="primary">提交</el-button>
          <el-button >返回</el-button>
        </el-space>
      </el-form-item>
        <span style="font-weight: bold">被合并用户明细列表</span>
       <br>
        <el-button type="primary">添加合并明细</el-button>
        <el-button type="primary">删除</el-button>
        <el-table style="width: 100%">
          <el-table-column label="选中" type="index" min-width="50" align="center"></el-table-column>
          <el-table-column label="申请流水号" prop="" min-width="100" align="center"></el-table-column>
          <el-table-column label="客户号" prop="" min-width="100" align="center"></el-table-column>
          <el-table-column label="客户名称" prop="" min-width="100" align="center"></el-table-column>
          <el-table-column label="管户客户经理" prop="" min-width="100" align="center"></el-table-column>
          <el-table-column label="所属网点" prop="" min-width="100" align="center"></el-table-column>
        </el-table>
    </el-form>
  </el-dialog>
</template>


<script setup>
import {onMounted, ref} from "vue";
//弹窗标题
const dialogTitle = ref('新增页面')
//弹窗是否出现
const dialogVisible = ref(true)
//新增按钮，打开弹窗
const beforeAdd = ()=>{
  dialogTitle.value = '新增员工';
  dialogVisible.value = true;
}
//定义处理关闭弹窗的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}

//加载界面
const locd = ()=>{}

onMounted(()=>{
  locd()
  dialogVisible.value=false
})
const id = ref('1231')
//修改按钮
const beforeEdit = ()=>{
  dialogTitle.value = '修改员工';
  dialogVisible.value = true;
}
</script>


<style scoped>

</style>